import { Component } from "react";
import { createPortal } from "react-dom";

class Alert extends Component {
    render() {
        return (
            <div id='popAlert' className='alert alert-danger'>
                这里是一段警示信息
            </div>
        );
    }
}

class Chapter11 extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        isshow: false,
    };
    toggle = () => {
        this.setState({
            isshow: !this.state.isshow,
        });
    };
    render() {
        const { title } = this.props;
        return (
            <div className='wrapper wrapper11'>
                <div className='page-header'>
                    <h3>{title}</h3>
                </div>
                <div className='page-content'>
                    {this.state.isshow &&
                        createPortal(
                            <Alert />,
                            document.querySelector(".container")
                        )}
                    <button className='btn btn-danger' onClick={this.toggle}>
                        切换显隐
                    </button>
                </div>
            </div>
        );
    }
}

export default Chapter11;
